<template>
  <div class="recommend">
    <div class="recommendNav clearfloat">
      <p class="floatLeft">热门推荐</p>
      <ul class="clearfloat floatLeft">
        <router-link to="/discoverMusic" tag="li" class="floatLeft">
          <a href="">华语</a><span class="line">|</span>
        </router-link>
        <router-link to="/myMusic" tag="li" class="floatLeft">
          <a href="">流行</a><span class="line">|</span>
        </router-link>
        <router-link to="/friend" tag="li" class="floatLeft">
          <a href="">摇滚</a><span class="line">|</span>
        </router-link>
        <router-link to="/mall" tag="li" class="floatLeft">
          <a href="">民谣</a><span class="line">|</span>
        </router-link>
        <router-link to="/musician" tag="li" class="floatLeft">
          <a href="">电子</a>
        </router-link>
      </ul>
      <p class="floatRight clearfloat more">
        <router-link to="/discoverMusic" class="floatLeft">更多</router-link>
        <span></span>
      </p>
    </div>
    <musicList :recommendMusicList="recommendMusicList"></musicList>
  </div>
</template>

<script type="text/ecmascript-6">
  import musicList from '../list/list.vue'
  export default{
    props: {
      recommendMusicList: {
        type: Array
      }
    },
    components: {
      musicList
    }
  }
</script>

<style>
  .recommend {
    width: 732px;
    margin-left: 60px;
    padding: 20px 20px 40px;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
.recommendNav{
  height: 33px;
  padding: 0 10px 0 34px;
  line-height: 33px;
  background: url('../../../resource/index.png') no-repeat -225px -153px;
  border-bottom: 2px solid #C10D0C;
}
  .recommendNav a {
    font-size: 12px;
    color: #333
  }
  .recommendNav ul{
    margin-left: 20px;
  }
  .recommendNav .more{
    line-height: 36px;
  }
  .recommendNav .more span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background: url('../../../resource/index.png') no-repeat 0 -240px;
  }
  .recommendNav .line {
    color: #ccc;
    margin: 0 10px;
  }
</style>
